<template>
  <view class="login-container">
    <!-- 顶部Logo -->
    <view class="logo-section">
      <image :src="logoSrc" mode="aspectFit"></image>
    </view>
    
    <!-- 登录表单 -->
    <view class="form-section">
      <!-- <view class="input-group">
        <input 
          type="text" 
          v-model="username" 
          placeholder="请输入用户名" 
          class="input-item"/>
      </view> -->
      <view class="input-group">
        <input 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
          class="input-item"/>
      </view>
      
      <view class="input-group password-group">
        <input 
          :type="showPassword? 'text' : 'password'" 
          v-model="password" 
          placeholder="请输入密码" 
          class="input-item"/>
        <view class="eye-icon" @click="toggleShowPassword">
          <uni-icons :type="showPassword? 'eye-filled' : 'eye' " size="24" color="#999"></uni-icons>
        </view>
      </view>
      
      <button class="login-btn" @click="handleLogin">登录</button>
      
      <view class="register-link" @click="goToRegister">
        立即注册
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      logoSrc: require('@/static/imgs/assets/lanqiao-logo.svg'),
      username: '',
      phone: '',
      password: '',
      showPassword: false
    }
  },
  methods: {
    
    // 验证手机号格式
    validatePhone() {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return false;
      }
      if (!phoneReg.test(this.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    
    // 验证密码
    validatePassword() {
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    // 切换密码显示状态
    toggleShowPassword() {
      this.showPassword =!this.showPassword;
    },
    
    // 处理登录
    handleLogin() {
      if (!this.validatePhone() ||!this.validatePassword()) {
        return;
      }
      
      // 保存当前购物车数据到本地存储
      const currentCart = uni.getStorageSync('cartItems') || [];
      uni.setStorageSync('savedCart', currentCart);
      
      // 清空购物车
      uni.removeStorageSync('cartItems');
      
      // 调用登录接口
      uni.request({
        url: 'http://localhost:3000/users',
        success: (res) => {
          uni.hideLoading();
          
          if (res.statusCode === 200) {
            const users = res.data;
            // 查找匹配的用户
            const user = users.find(u => u.phone === this.phone && u.password === this.password);
            
            if (user) {
              // 保存用户信息到本地存储
              uni.setStorageSync('userInfo', JSON.stringify({
                _id: user.id,
                username: user.username,
                phone: user.phone
              }));
              
              uni.showToast({
                title: '登录成功',
                icon:'success',
                duration: 2000
              });
              
              // 登录成功后跳转到首页
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                });
              }, 1000);
            } else {
              uni.showToast({
                title: '用户名、手机号或密码错误',
                icon: 'none'
              });
            }
          } else {
            uni.showToast({
              title: '登录失败，请稍后再试',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: '网络错误，请稍后再试',
            icon: 'none'
          });
        }
      });
    },
    
    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/login/register'
      });
    }
  }
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 60rpx; 
}

.logo-section {
  display: flex;
  justify-content: center;
  padding: 30rpx 0; 
}

.form-section {
  margin-top: 40rpx; 
 .input-group {
    border-bottom: 1rpx solid #ddd; 
    margin-bottom: 30rpx; 
   .input-item {
      height: 80rpx; 
      font-size: 30rpx; 
      border: none; /* 去除输入框四周边框 */
      outline: none; /* 去除聚焦时的外边框 */
    }
  }
}
  .password-group {
    position: relative;
   .eye-icon {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
 .login-btn {
    background-color: #007AFF; 
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 8rpx; 
    font-size: 32rpx;
    margin-top: 60rpx; 
  }
 .register-link {
    text-align: center;
    margin-top: 30rpx; 
    font-size: 28rpx;
    color: #007AFF; 
        &:hover {
      color: #0056b3;
    }
  }
</style>